<template>
  <div>
    <!-- 
        列表数据加载组件
        loading: 如果为false数据加载完毕,true加载新数据
        finished: false没有完成，可以继续加载新数据，如果为true没有没有更多的数据了loading设置无效,只有finished为false时，loading设置才有效果
        load:加载事件
        如果你的列表高度没有达到屏幕高度，则它会继续向下加载，直到没有数据可，数据达到屏幕高度，则停止加载
      -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!-- <van-cell v-for="item in nowPlayingFilmList" :key="item.filmId" :to="`/detail/${item.filmId}`"> -->
      <!-- 如果你的id重复，则key就会报警告 -->
      <!-- <van-cell v-for="item in nowPlayingFilmList" :key="item.filmId"> -->
      <van-cell v-for="(item, index) in nowPlayingFilmList" :key="index">
        <template #title>
          <!-- 每项显示的 -->
          <film-item :info="item" @routerClick="goDetail" />
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getNowPlayingFilmListApi } from '@/api/filmApi'
import filmItem from './ui/filmItem'
export default {
  components: {
    filmItem
  },
  data() {
    return {
      nowPlayingFilmList: this.$store.state.film.nowPlaying,
      page: 1,
      loading: false,
      finished: false,
      init: true
    }
  },
  async mounted() {
    // console.log('mounted')
    // 手动调用一次onLoad事件完成数据的请求
    if (this.$store.state.film.nowPlaying.length == 0) {
      this.onLoad()
      // 是否是第1次加载，没有写
      this.init = false
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    },
    async onLoad() {
      // vuex中如果有数据则先不进行网络请求，只有滚动行进行
      // if (this.$store.state.film.nowPlaying.length == 0) {
      // 可以确认为第1次加载
      if (this.init) {
        let ret = await getNowPlayingFilmListApi(this.page)
        // 有新数据
        if (ret.length > 0) {
          // 通知vuex存储数据
          this.$store.commit('addNowPlayingFilmLis', ret)
          // 添加到本组件中的数据源  追加  出现id重复
          this.nowPlayingFilmList.push(...ret)
          // 加载状态结束
          this.loading = false
          this.page++
          this.init = true
        } else {
          // 数据全部加载完成
          this.finished = true
          this.$toast({
            message: '没有更多的数据',
            duration: 1500
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell {
  height: 140px;
}
</style>
